<template>
  <div id="road" @click="change"
    :style="log == 0 ? 'background-color:rgb(245, 245, 245)' : 'background-color: rgba(13, 13, 13, 0.8)'">工具箱
    <el-dropdown>
      <span class="el-dropdown-link">
       
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="draw">绘制工具</el-dropdown-item>
          <el-dropdown-item @click="picture">导出图片</el-dropdown-item>
          <el-dropdown-item @click="fly">回到初始位置</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>


  </div>
</template>
  
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, computed,inject } from 'vue'
import { ControlEvent, DrawControl } from '@antv/l7-draw';
import { Scene, GaodeMap, ExportImage, PolygonLayer } from '@antv/l7';
import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';
const log = ref(0);
let active = ref()
const { scene, map } = inject("$scene_map");
const change = () => {
  if (log.value == 0) {
    log.value = 1

  } else {
    log.value = 0

  }

}

const draw=()=>{
 
  const drawControl = new DrawControl(scene,{
         position: 'topright',
         style:'margin-top:150px;'
  });
  scene.addControl(drawControl);
  drawControl.on(ControlEvent.DrawChange, (changeType) => {
    console.log(changeType);
  });

}
const picture=()=>{
  
  const exportImage = new ExportImage({
    onExport: (base64) => {
      
      //const imgUrl = `data:image/jpg;base64,${base64}`;
      let a = document.createElement('a')
		a.href = base64;
		a.download = "picture.png"; //文件名
		document.body.appendChild(a);
		a.click(); // 触发点击
		document.body.removeChild(a);


    },position: 'topright',
         style:'margin-top:100px;'
  });
  scene.addControl(exportImage);
   
}
const fly=()=>{
 
 const center = [114.50160434671074, 38.022183410316735];
scene.setZoomAndCenter(12, center);

}
</script>
<style scoped>
#road {
  height: 100%;
  width: 150px;
  font-size: 25px;
  color: grey;
  line-height: 80px;
  border-left: 1px solid;
  border-color: gray;
  padding-left: 7px;
  padding-right: 7px;
  align-items: center;
  display: flex;
  justify-content: center;

}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


</style>